<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>投诉</title>
    <style>
        div {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        table, tr, th, td {
            border: 1px solid #5fbdcb;
        }

        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<div>
    请选择要投诉的类型：<label for="select"></label>
    <select id="select">
        <option value="store">店铺</option>
        <option value="system">系统</option>
    </select>
    <span></span><br>
    请输入投诉内容:<label for="content"></label>
    <textarea id="content" placeholder="请输入投诉内容"></textarea><br>
    <input type="button" id="button" value="提交"><br>
    <a href="UserPage.jsp">返回</a>
</div>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
    let span = document.querySelector('span');
    let input = document.createElement('input');
    input.id = 'store';
    span.appendChild(input);
    select.onchange = function () {
        if (this.value === 'store') {
            span.appendChild(input);
            input.type = 'text';
            input.placeholder = '请输入店铺名称';
            input.name = 'store';
        } else {
            span.removeChild(input);
        }
    }
    $(function () {
        $('#button').on('click', function () {
            $.ajax({
                url: "http://localhost:8080/complaint.do",
                type: "post",
                data: {
                    field: $('select option:checked').val(),
                    store: $('#store').val(),
                    content: $('#content').val(),
                    method: 'doComplaint'
                },
                dataType: "text",
                success: function (data) {
                    if (data === 'ok') {
                        alert("投诉成功！请等待管理员处理");
                        window.location.href = 'UserPage.jsp';
                    } else {
                        alert("投诉失败");
                    }
                }
            })
        })
    })
</script>
</body>
</html>
